$(function () {
    //使用事例
    //1.单图例：
    //<div class="ybUploadFile" data-name="img" data-value="/uploads/20181115/023ecb800cd80e737ecd5307f3424d9c.jpg"></div>
    //2.多图例：值为json路径一维数组
    //<div class="ybUploadFileMulti" data-name="imgs" data-value="<?php echo json_encode(数组)?>"></div>

    ybUplodInit();

    ybDoUploadInit();

    //关闭图片
    $('body').on('click', '.uploadFile-img .layui-layer-close', function () {
        $(this).parents('.img-div').remove();
    });

})

function ybDoUploadInit(){
    var upload = layui.upload;

    //上传单图
    upload.render({
        elem: '.doUploadFile'
        ,url: "/admin/Upload/upload"
        ,multiple: false
        ,done: function(res){
            if(res.code == 1){
                var that = $(this)[0].item;

                var name = that.attr('data-name');
                var str = '<div class="img-div" style="width: 160px;height: 160px;position: relative;">' +
                    '           <img src="'+res.data.path+'" style="width:100%;height: 100%;" > ' +
                    '           <input type="hidden" name="'+name+'" value="'+res.data.path+'">' +
                    '       </div>';
                that.find('.uploadFile-img').html(str);
                that.find('.uploadFile-icon').addClass('layui-hide');
                layui.layer.msg('上传成功');
            }else{
                layui.layer.msg(res.msg);
            }
        }
    });

    //上传多图
    upload.render({
        elem: '.doUploadFileMulti'
        ,url: "/admin/Upload/upload"
        ,multiple: false
        ,done: function(res){
            if(res.code == 1){
                var that = $(this)[0].item;
                var name = that.attr('data-name');
                var str = '<div class="img-div" style="margin-left: 10px; float: left; width: 160px;height: 160px;overflow: hidden;position: relative"> ' +
                    '           <img src="'+res.data.path+'" style="width:100%;height: 100%;" > ' +
                    '           <span class="layui-layer-setwin" style="top: 30px;right: 30px">' +
                    '               <a class="layui-layer-ico layui-layer-close layui-layer-close2" href="javascript:;"></a> ' +
                    '           </span>' +
                    '           <input type="hidden" name="'+name+'[]" value="'+res.data.path+'">' +
                    '       </div>';
                that.before(str);
                layui.layer.msg('上传成功');
            }else{
                layui.layer.msg('上传失败');
            }
        }
    });
}

function ybUplodInit(pNode) {
    ((undefined === pNode) || ('' === pNode))
        ? pNode = $('body')
        : (
        (pNode instanceof jQuery)
            ? false
            : pNode = $(pNode)
    );

    //单图
    pNode.find('.ybUploadFile').each(function () {
        ybCreateUploadFile($(this));
    });

    //多图
    pNode.find('.ybUploadFileMulti').each(function () {
        ybCreateUploadFileMulti($(this));
    });

}

function ybCreateUploadFile(viewContainer){
    var content = new Array();
    var name = viewContainer.data('name');
    var value = viewContainer.data('value');

    name = (name !== undefined) ? name : '';
    value = (value !== undefined) ? value : '';

    var contentStr ='<div class="layui-upload-drag doUploadFile" data-name="'+name+'" style="width: 100px;height:100px;position: relative;">' +
                    '      <div class="uploadFile-img" style="position: absolute;top: 0;left: 0;overflow: hidden;">'+
                    '           <div class="img-div" style="width: 160px;height: 160px;position: relative;">' +
        (value !== '' ? '           <img src="'+ value + '" style="width:100%;height: 100%;" >' : '') +
        (name !== '' ? '            <input type="hidden" name="'+ name +'" value="'+ value +'">' : '') +
                    '           </div>' +
                    '      </div>' +
                    '      <div class="uploadFile-icon">' +
        (value !== '' ? '       <i class="layui-icon layui-hide"></i>' : '<i class="layui-icon"></i>') +
                    '           <p>点击上传图片</p>' +
                    '       </div>' +
                    '</div>';
    content.push(contentStr);
    viewContainer.html(content.join(''));
}

function ybCreateUploadFileMulti(viewContainer) {
    var content = new Array();
    var name = viewContainer.data('name');
    var value = viewContainer.data('value');

    name = (name !== undefined) ? name : '';
    value = value ? value : [];

    var contentStr ='<div class="uploadFile-img" style="float: left;overflow:hidden;">';
    $.each(value,function(key,item){
        contentStr += '<div class="img-div" style="margin-left: 10px; float: left; width: 160px;height: 160px;overflow: hidden;position: relative"> ' +
                '           <img src="'+ item +'" style="width:100%;height: 100%;" > ' +
                '           <span class="layui-layer-setwin" style="top: 30px;right: 30px">' +
                '               <a class="layui-layer-ico layui-layer-close layui-layer-close2" href="javascript:;"></a> ' +
                '           </span>' +
                '           <input type="hidden" name="'+name+'[]" value="'+item+'">' +
                '       </div>';
    });

        contentStr +=
                    '<div class="layui-upload-drag doUploadFileMulti" data-name="'+ name +'" style="width: 100px;height: 100px;margin-left: 10px;">' +
                    '   <div class="uploadFile-icon"><i class="layui-icon"></i><p>点击上传图片</p></div>' +
                    '</div>' +
                '</div>';
    content.push(contentStr);
    viewContainer.html(content.join(''));
}